import React from 'react';
import styles from './TodoList.css';
import TodoItem from './TodoItem';
function getVisiableTodos(todolist,filter) {
  if(filter==='SHOE_ACTIVE'){
    return todolist.filter(todo=>{
      // console.log(todo)
      return !todo.completed
    })
  }
  else if(filter==='SHOE_COMPLETED'){
    return todolist.filter(todo=>{
      // console.log(todo)
      return todo.completed
    })
  }
  else {
    return todolist
  }
}
function TodoList(props) {
  console.log(props)
  let {todos,dispatch}=props
  console.log(todos)
  let todolist=getVisiableTodos(props.todos.content,props.todos.filter)
  return (
    <ul className={styles.normal}>
      {
        todolist.map(todo=>{
        return(
        <TodoItem key={todo.id} todo={todo}
         {...props}/>)})
      }
    </ul>
  );
}

export default TodoList;
